<template>
 <div class="con">
  <!-- 返回箭头 -->
  <div class="back">
    <a href="index.html?type=index"><img src="img/left.jpg" /></a>
  </div>
  <!-- 内容 -->
  <div class="main clear">
    <!-- 左侧小标题 -->
    <div class="title">
      <div class="titleBlock t1">
        <div class="tiao"></div>
        <p class="titleName">厨房用品</p>
      </div>
      <div class="titleBlock t2">
        <div class="tiao"></div>
        <p class="titleName">日常用品</p>
      </div>
      <div class="titleBlock t1">
        <div class="tiao"></div>
        <p class="titleName">创意用品</p>
      </div>
      <div class="titleBlock t2">
        <div class="tiao"></div>
        <p class="titleName">懒人神器</p>
      </div>
      <div class="titleBlock t1">
        <div class="tiao"></div>
        <p class="titleName">厨房用品</p>
      </div>
      <div class="titleBlock t2">
        <div class="tiao"></div>
        <p class="titleName">创意用品</p>
      </div>
      <div class="di"></div>
    </div>

    <!-- 右侧信息 -->
    <div class="mainCon fr c1">
      <ul>
        <li v-for="obj in supplies"><a href="#">
          <div class="img">
            <img v-bind:src=obj.img>
          </div>
          <div class="word">
            <p class="name">{{obj.name}}</p>
            <p class="price">{{obj.price}} 
              <span>原价: </span>
              <span>{{obj.yPrice}}</span>
            </p>
          </div>
        </a></li> 
      </ul>
    </div>

    <div class="mainCon fr c2">
      <ul>
        <li v-for="obj in supplies2"><a href="#">
          <div class="img">
            <img v-bind:src=obj.img>
          </div>
          <div class="word">
            <p class="name">{{obj.name}}</p>
            <p class="price">{{obj.price}} 
              <span>原价: </span>
              <span>{{obj.yPrice}}</span>
            </p>
          </div>
        </a></li> 
      </ul>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {      
      supplies:[
      ],
      supplies2:[
      ]
    }
  },
  methods:{
    choses:function(){  
      
    }
  },
  ready:function(){
    var _this = this;
    $.ajax({
      type:"GET",
      url:"http://172.16.18.44/php/supplies.php?cb=JSON_CALL&",
      dataType:"jsonp",
      jsonp:"cb",
      success:function(data){
          _this.supplies= data;
      }
    })
    $.ajax({
      type:"GET",
      url:"http://172.16.18.44/php/supplies2.php?cb=JSON_CALL&",
      dataType:"jsonp",
      jsonp:"cb",
      success:function(data){
          _this.supplies2 = data;
      }
    })
  }
}

</script>

<style scoped>
.main{
  width: 97%;
  height: 100%;
  margin: 3% 3% 0 0;
  /*border: 1px red solid;*/
}
.main .title{
  width: 28%;
  height: 100%;
  /*border: 1px blue solid;*/
  display: inline-block;
  background-color: #f2f2f2;
}

.main .title .titleBlock{
  width: 100%;
  height: 0.45rem;
  position: relative;
  /*border: 1px red solid;*/
}
.main .title .titleBlock .tiao{
  width: 8%;
  height: 100%;
  position: absolute;
  top: 0;
  /*background-color: #f29004;*/
  background-color: #f2f2f2;
}
.main .title .titleBlock p{
  font-size: 0.14rem;
  width: 100%;
  text-align: center;
  line-height: 0.45rem;
  background-color: #f2f2f2;
  /*background-color: #e6e6e6;*/
}
.main .title .titleBlock:nth-child(1) .tiao{
  background-color: #f29004;
}
.main .title .titleBlock:nth-child(1) p{
  background-color: #e6e6e6;
}
.main .mainCon{
  width: 68%;
  height: 100%;
  /*border: 1px blue solid;*/
  background: #ffffff;
}
.main .c2{
  display: none;
}
.main .mainCon li{
  width: 100%;
  height: 12%;
  position: relative;
  /*border: 1px red solid;*/
  padding-bottom: 0.1rem;
  margin-bottom: 0.1rem;
}
.main .mainCon li .img{
  top: 0;
  /*left: */
  width: 30%;
  border: 1px solid #e6e6e6;
}
.main .mainCon li img{
  width: 100%;
}
.main .mainCon li .word{
  position: absolute;
  left: 30%;
  top: 8%;
  width: 65%;
  display: inline-block;
  padding-left: 3%; 
  /*border: 1px yellow solid;*/
}
.main .mainCon li .name{
  font-size: 0.15rem;
  line-height: 0.2rem;
  color: #1b1b1b;
  /*white-space: nowrap;*/
  /*overflow: hidden;*/
  /*text-overflow: ellipsis;*/
}
.main .mainCon li .price{
  /*border: 1px blue solid;*/
  font-size: 0.15rem;
  color: red;
  margin-top: 3%;
}
.main .mainCon li .price span{
  font-size: 0.13rem;
  color: #7c7c7c;
}
.main .mainCon li .price span:nth-child(1){
  margin-left: 2%;
}
.main .mainCon li .price span:nth-child(2){
  text-decoration: line-through;
}
.di{
  padding: 1.53rem;
}
.con .back a{
  position: fixed;
  width: 5%;
  top: 0.12rem;
  left: 0.05rem;
  z-index: 1222;
}
.con .back img{
  width: 100%;
}
/*.left_img{
  position: absolute;
  display: inline-block;
  width: 3%;
  left: 3%;
}
.left_img img{
  width: 100%;
}*/
html,body{
  width: 100%;
  max-width: 2000px;
} 

</style>
